<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdown 下拉菜单</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
<style>
.ant-dropdown-link{
	color: #006BFF;
}
.demo-dropdown-wrap > .ant-dropdown-button{
	margin: 0 8px;
}
.item-center{
	display: inline-flex;
}

#components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}

</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的下拉菜单。</p>
	<a-dropdown>
		<a class="ant-dropdown-link item-center" @click.prevent>
			Hover me
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu>
				<a-menu-item>
					<a href="javascript:;">1st menu item</a>
				</a-menu-item>
				<a-menu-item>
					<a href="javascript:;">2nd menu item</a>
				</a-menu-item>
				<a-menu-item>
					<a href="javascript:;">3rd menu item</a>
				</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">带下拉框的按钮</a-divider><!-- =============================================================== -->
	<p class="desc">左边是按钮，右边是额外的相关功能菜单。可设置 icon 属性来修改右边的图标。</p>
	<div class="demo-dropdown-wrap">
		<a-dropdown-button @click="handleButtonClick" @openChange="openChange">
			Dropdown
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">
						<user class="aut-icon"></user>
						1st menu item
					</a-menu-item>
					<a-menu-item key="2">
						<user class="aut-icon"></user>
						2nd menu item
					</a-menu-item>
					<a-menu-item key="3">
						<user class="aut-icon"></user>
						3rd item
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown-button>
		
		<a-dropdown-button>
			Dropdown
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">
						<user-filled class="aut-icon"></user-filled>
						1st menu item
					</a-menu-item>
					<a-menu-item key="2">
						<user-filled class="aut-icon"></user-filled>
						2nd menu item
					</a-menu-item>
					<a-menu-item key="3">
						<user-filled class="aut-icon"></user-filled>
						3rd item
					</a-menu-item>
				</a-menu>
			</template>
			<template #icon>
				<user-filled class="aut-icon"></user-filled>
			</template>
		</a-dropdown-button>
		
		<a-dropdown-button disabled @click="handleButtonClick">
			Dropdown
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">
						<user class="aut-icon"></user>
						1st menu item
					</a-menu-item>
					<a-menu-item key="2">
						<user class="aut-icon"></user>
						2nd menu item
					</a-menu-item>
					<a-menu-item key="3">
						<user class="aut-icon"></user>
						3rd item
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown-button>
		
		<a-dropdown>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">
						<user-filled class="aut-icon"></user-filled>
						1st menu item
					</a-menu-item>
					<a-menu-item key="2">
						<user-filled class="aut-icon"></user-filled>
						2nd menu item
					</a-menu-item>
					<a-menu-item key="3">
						<user-filled class="aut-icon"></user-filled>
						3rd item
					</a-menu-item>
				</a-menu>
			</template>
			<a-button class="item-center" @click="handleButtonClick">
				Button
				<arrow-down class="aut-icon"></arrow-down>
			</a-button>
		</a-dropdown>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">其他元素</a-divider><!-- =============================================================== -->
	<p class="desc">分割线和不可用菜单项。</p>
	<a-dropdown>
		<a class="ant-dropdown-link item-center" @click.prevent>
			Hover me
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu>
				<a-menu-item key="0">
					<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
				</a-menu-item>
				<a-menu-item key="1">
					<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
				</a-menu-item>
				
				<a-menu-divider></a-menu-divider>
				<a-menu-item key="3" disabled>3rd menu item（disabled）</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">弹出位置</a-divider><!-- =============================================================== -->
	<p class="desc">支持 6 个弹出位置。</p>
	<div id="components-dropdown-demo-placement">
		<template v-for="(placement, index) in placements" :key="placement">
			<a-dropdown :placement="placement">
				<a-button>{{ placement }}</a-button>
				<template #overlay>
					<a-menu>
						<a-menu-item>
							<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
						</a-menu-item>
						<a-menu-item>
							<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
						</a-menu-item>
						<a-menu-item>
							<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
						</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
			<br v-if="index === 2" />
		</template>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">箭头指向</a-divider><!-- =============================================================== -->
	<p class="desc">设置 arrow 为 { pointAtCenter: true } 后，箭头将指向目标元素的中心。</p>
	<a-space style="display: flex; flex-wrap: wrap">
		<template v-for="placement in placements" :key="placement">
			<a-dropdown :placement="placement" :arrow="{ pointAtCenter: true }">
				<a-button>{{ placement }}</a-button>
				<template #overlay>
					<a-menu>
						<a-menu-item>
							<a href="http://www.jd.com/">1st menu item</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">2nd menu item</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">3rd menu item</a>
						</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
		</template>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">箭头</a-divider><!-- =============================================================== -->
	<p class="desc">可以展示一个箭头。这个和上面的区别就是箭头指向元素的位置不一样</p>
	<a-space style="display: flex; flex-wrap: wrap">
		<template v-for="placement in placements" :key="placement">
			<a-dropdown :placement="placement" arrow>
				<a-button>{{ placement }}</a-button>
				<template #overlay>
					<a-menu @click="handleMenuClick">
						<a-menu-item key="1">
							<a href="javascript:;">1st menu item</a>
						</a-menu-item>
						<a-menu-item key="str">
							<a href="javascript:;">2nd menu item</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">3rd menu item</a>
						</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
		</template>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">触发方式</a-divider><!-- =============================================================== -->
	<p class="desc">默认是移入触发菜单，可以点击触发。</p>
	<a-dropdown :trigger="['click']">
		<a class="ant-dropdown-link item-center" @click.prevent>
			Click me
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu>
				<a-menu-item key="0">
					<a href="http://www.alipay.com/">1st menu item</a>
				</a-menu-item>
				<a-menu-item key="1">
					<a href="http://www.taobao.com/">2nd menu item</a>
				</a-menu-item>
				<a-menu-divider></a-menu-divider>
				<a-menu-item key="3">3rd menu item</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">右键菜单</a-divider><!-- =============================================================== -->
	<p class="desc">默认是移入触发菜单，可以点击鼠标右键触发。</p>
	<a-dropdown :trigger="['contextmenu']">
		<div :style="{textAlign: 'center',background: '#f7f7f7',height: '200px',lineHeight: '200px',color: '#777',}">
			Right Click on here
		</div>
		<template #overlay>
			<a-menu @click="handleMenuClick">
				<a-menu-item key="1">1st menu item</a-menu-item>
				<a-menu-item key="2">2nd menu item</a-menu-item>
				<a-menu-item key="3">3rd menu item</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">触发事件</a-divider><!-- =============================================================== -->
	<p class="desc">点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。</p>
	<a-dropdown>
		<a class="ant-dropdown-link item-center" @click.prevent>
			Hover me, Click menu item
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu @click="onClick">
				<a-menu-item key="1">1st menu item</a-menu-item>
				<a-menu-item key="2">2nd menu item</a-menu-item>
				<a-menu-item key="3">3rd menu item</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">菜单隐藏方式</a-divider><!-- =============================================================== -->
	<p class="desc">默认是点击关闭菜单，可以关闭此功能。</p>
	<a-dropdown v-model:open="visible">
		<a class="ant-dropdown-link item-center" @click.prevent>
			Hover me
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu @click="handleMenuClick2">
				<a-menu-item key="1">单击我不会关闭菜单。</a-menu-item>
				<a-menu-item key="2">单击我也不会关闭菜单。</a-menu-item>
				<a-menu-item key="3">单击我将关闭菜单</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	<a-divider class="a-divi" orientation="left">多级菜单</a-divider><!-- =============================================================== -->
	<p class="desc">传入的菜单里有多个层级。</p>
	<a-dropdown>
		<a class="ant-dropdown-link item-center" @click="myClick('Cascading menu')">
			Cascading menu
			<arrow-down class="aut-icon"></arrow-down>
		</a>
		<template #overlay>
			<a-menu @click="handleMenuClick">
				<a-menu-item key="1st">1st menu item</a-menu-item>
				<a-menu-item key="2nd">2nd menu item</a-menu-item>
				<a-sub-menu key="sub1" title="sub menu" @click="myClick('sub1')">
					<a-menu-item key="3rd">3rd menu item</a-menu-item>
					<a-menu-item key="4th">4th menu item</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="sub2" title="disabled sub menu" disabled>
					<a-menu-item>5d menu item</a-menu-item>
					<a-menu-item>6th menu item</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</template>
	</a-dropdown>
	
	
	
	<a-divider class="a-divi" orientation="left">加载中状态</a-divider><!-- =============================================================== -->
	<p class="desc">添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。</p>
	<a-space direction="vertical">
		<a-dropdown-button type="primary" loading>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">Submit and continue</a-menu-item>
				</a-menu>
			</template>
			Submit
		</a-dropdown-button>
		
		<a-dropdown-button type="primary" size="small" loading>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">Submit and continue</a-menu-item>
				</a-menu>
			</template>
			Submit
		</a-dropdown-button>
		
		<a-dropdown-button type="primary" :loading="loading1" @click="enterLoading1">
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">Submit and continue</a-menu-item>
				</a-menu>
			</template>
			Submit
		</a-dropdown-button>
		
		<a-dropdown-button :loading="loading2" @click="enterLoading2">
			Submit
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">Submit and continue</a-menu-item>
				</a-menu>
			</template>
			<template #icon>
				<arrow-down class="aut-icon"></arrow-down>
			</template>
		</a-dropdown-button>
	</a-space>
	
	
	
	<a-divider class="a-divi" orientation="left">API#</a-divider><!-- =============================================================== -->
API#
属性如下
参数	说明	类型	默认值	
align	该值将合并到 placement 的配置中，设置参考 dom-align	Object	-	
arrow	下拉框箭头是否显示	boolean | { pointAtCenter: boolean }	false	3.3.0
destroyPopupOnHide	关闭后是否销毁 Dropdown	boolean	false	3.0
disabled	菜单是否禁用	boolean	-	
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。	Function(triggerNode)	() => document.body	
overlay(v-slot)	菜单	Menu	-	
overlayClassName	下拉根元素的类名称	string	-	
overlayStyle	下拉根元素的样式	object	-	
placement	菜单弹出位置	bottomLeft | bottom | bottomRight | topLeft | top | topRight	bottomLeft	
trigger	触发下拉的行为, 移动端不支持 hover	Array(click|hover|contextmenu)	['hover']	
open(v-model)	菜单是否显示	boolean	-	
overlay 菜单使用 Menu，还包括菜单项 Menu.Item，分割线 Menu.Divider。

事件 #
事件名称	说明	回调参数	版本
openChange	菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发	function(open)	4.0

Dropdown.Button #
参数	说明	类型	默认值	版本
disabled	菜单是否禁用	boolean	-	
icon	右侧的 icon	VNode | slot	-	1.5.0
loading	设置按钮载入状态	boolean | { delay: number }	false	3.0
overlay(v-slot)	菜单	Menu	-	
placement	菜单弹出位置	bottomLeft | bottom | bottomRight | topLeft | top | topRight	bottomLeft	
size	按钮大小，和 Button 一致	string	'default'	
trigger	触发下拉的行为	Array(click|hover|contextmenu)	['hover']	
type	按钮类型，和 Button 一致	string	'default'	
open(v-model)	菜单是否显示	boolean	-	

Dropdown.Button 事件 #
事件名称	说明	回调参数	版本
click	点击左侧按钮的回调，和 Button 一致	Function	
openChange	菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发	function(open)	4.0
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		placements: ['bottomLeft','bottom','bottomRight','topLeft','top','topRight',],
		
		visible: false,
		
		loading1: false,
		loading2: false,
		
		
	}
},
methods:{
	openChange(){
		console.log("openChange没生效");
		// return function(e){
		// 	console.log("openChange", e);
		// }
	},
	handleButtonClick(e){
		console.log('handleButtonClick', e);
	},
	handleMenuClick(e){
		console.log('handleMenuClick', e);
	},
	handleMenuClick2(e){
		if(e.key == '3'){
			this.visible = false;
		}
	},
	
	onClick({key}){
		console.log(`Click on item ${key}`);
	},
	
	myClick(val){
		console.log(`myClick：${val}`);
	},
	
	enterLoading1(){
		this.loading1 = true;
		setTimeout(()=>{
			this.loading1 = false;
		}, 1000);
	},
	enterLoading2(){
		this.loading2 = true;
		setTimeout(()=>{
			this.loading2 = false;
		}, 1000);
	},
	
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
